<template>
	<view>
		<view style="width: 750upx;height: 176upx;">
			<image src="../../static/shangmen/bj.png" style="width: 750upx;height: 176upx;position: absolute;"></image>
			<view style="display: flex;" @click="shangyibu">
				<view style="position: absolute;display: flex;margin-left: 20upx;line-height: 176upx;">
					<image src="../../static/shangmen/29.png" style="width: 50upx;height: 50upx;margin-top: 100upx;"></image>
				</view>
				<view style="width: 750upx;height: 176upx;text-align: center;font-size: 36upx;line-height: 130px;position: absolute;z-index: 1;color: #fff;">车生活</view>
			</view>
		</view>
		<view class="list">
			<view class="zuo" :style="{ height: height}">
				<view :class="item.is_show == 0?'zuo_boxs':'zuo_box'" v-for="(item,index) in zuo_data" :key="index" @click="zuo_box_tap(item)">{{item.name}}</view>
			</view>
			<view class="you" :style="{ height: height}">
				<scroll-view scroll-y :style="{ height: height}">
					<view v-if="you_data.length != 0" class="you_box" v-for="(item,index) in you_data" :key="index" @click="cart(item.goods_id,item)">
						<image class="you_box_img" :src="item.image" mode="aspectFill"></image>
						<view class="you_box_text">
							<view class="you_box_texts">{{item.name}}</view>
							<view class="you_box_textss">￥ <text style="font-size: 36upx;">{{item.price}}</text> </view>
						</view>
					</view>
					<view v-if="you_data.length == 0" style="width: 100%;text-align: center;font-size: 28upx;color: #999;line-height: 100upx;">暂无更多数据</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import classifyData from '../../common/classify.data.js';
	export default {
		data() {
			return {
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				// classifyData:classifyData,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				datas:[],
				classifyData:[],
				value_data:'',
				id:'',
				index_key:'',
				zuo_data:[],
				you_data:[],
				car_name:''
			}
		},
		onLoad(num) {
			console.log('1111',uni.getSystemInfoSync().windowHeight)
			this.height = (Number(uni.getSystemInfoSync().windowHeight) - 100) + 'px'
			// this.height = (uni.getSystemInfoSync().windowHeight - this.tabBarHeight) - 100
			this.id = num.id
			if( num.categoryActive ) {
				this.categoryActive = num.categoryActive
			}else{
				this.categoryActive = 0
			}
			// this.categoryClickMain(num.categoryActive)
			// this.categoryActive = num.categoryActive
			// console.log('num',num)
			// console.log('this.arr',this.arr)
			// console.log('this.scrollTop',this.scrollTop)
		},
		onShow() {
			this.index_notice_api()
			this.goods_type_api()
		},
		methods: {
			index_notice_api() {
				var that = this
				that.$request(that.$Api.index_notice_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city,
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.car_name = res.data.data.car_name
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			zuo_box_tap(item) {
				for( let i=0;i<this.zuo_data.length;i++ ) {
					if( item.key == i ) {
						this.zuo_data[i].is_show = 1
						this.you_data = this.classifyData[i].list
					}else{
						this.zuo_data[i].is_show = 0
					}
				}
			},
			shangyibu() {
				uni.navigateBack()
			},
			confirm_tap() {
				if( this.value_data != '' ) {
					this.goods_type_api()
					// uni.navigateTo({
					// 	url:'../../home/commodity_list/commodity_list?keyword='+this.value_data
					// })
				}
			},
			input_tap(num) {
				this.value_data = num.detail.value
			},
			//分类列表
			goods_type_api(id) {
				var that = this
				that.$request(that.$Api.car_list_api, {
					access_token:uni.getStorageSync('access_token'),
					city:uni.getStorageSync('city'),
				},"POST").then(res => {
					// if( that.index_key != '' ){
					// 	that.classifyData = [res.data.data[that.index_key]]
					// }else{
					// 	that.classifyData = res.data.data
					// }
					console.log('res.data.data',res.data.data)
					var zuo_datas = []
					var you_datas = []
					for( let i=0;i<res.data.data.length;i++ ) {
						var arr = {
							name:res.data.data[i].name,
							key:i,
							is_show:0
						}
						zuo_datas.push(arr)
						
					}
					// for( let j=o;j<res.data.data[0].length;j++ ) {
					// 	you_datas.push(res.data.data[0][i])
					// }
					that.zuo_data = zuo_datas
					that.you_data = res.data.data[that.categoryActive].list
					that.classifyData = res.data.data
					that.zuo_data[that.categoryActive].is_show = 1
					console.log('that.zuo_data',that.zuo_data)
					console.log('that.you_data',that.you_data)
					console.log('that.classifyData',that.classifyData)
					// that.$nextTick(()=>{
					// 	that.getHeightList();
					// })
				})
			},
			getHeightList(){
				let _this = this;
				let selectorQuery=uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					console.log('rects',rects)
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
	// 					rect.id      // 节点的ID
	// 					rect.dataset // 节点的dataset
	// 					rect.left    // 节点的左边界坐标
	// 					rect.right   // 节点的右边界坐标
	// 					rect.top     // 节点的上边界坐标
	// 					rect.bottom  // 节点的下边界坐标
	// 					rect.width   // 节点的宽度
	// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
						})
						_this.arr = arr
					}).exec()
			},
			scroll(e) {
				let _this = this
				console.log('scroll',e)
				if(this.timeoutId){
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function(){ //节流
					// _this.scrollHeight = e.detail.scrollTop + 1 + _this.height/2;
					_this.scrollHeight = e.detail.scrollTop + 1;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length;i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i+1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							(_this.diff>0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff)/(classifyData.length-1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10)
			},
			categoryClickMain(index) {
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
				console.log('this.categoryActive',this.categoryActive)
				console.log('this.scrollTop',this.scrollTop)
				console.log('this.arr[index]',this.arr[index])
			},
			cart (goods_id,item) {
				if( this.car_name == '' ) {
					var that = this
					uni.showModal({
						title: '提示',
						content: '请先添加车型',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url:'../brand/brand'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				var data = {
					goods_id:goods_id,
					image:item.image,
					name:item.name,
					price:item.price,
				}
				// uni.navigateTo({
				// 	url:'../order_zf_b/order_zf_b?data_list='+JSON.stringify(data)
				// })
				uni.navigateTo({
					url:'../shop_details/shop_details?goods_id='+goods_id
				})
				// uni.showToast({
				// 	title: text,
				// 	icon: "none",
				// })
			}
		}
	}
</script>

<style lang="less">
	.list{
		width: 750upx;
		display: flex;
		.you{
			.you_box{
				.you_box_text{
					.you_box_textss{
						font-size: 28upx;
						color: #FF4B33;
						margin-top: 20upx;
					}
					.you_box_texts{
						font-size: 32upx;
						color: #333333;
					}
					margin-left: 20upx;
					margin-top: 20upx;
				}
				.you_box_img{
					width: 158upx;
					height: 158upx;
					background: #F8F8F8;
				}
				width: 470upx;
				display: flex;
				padding: 30upx 25upx;
			}
			width: 520upx;
			background: #fff;
		}
		.zuo{
			width: 230upx;
			background: #F5F5F5;
			.zuo_box{
				padding: 30upx 0;
				text-align: center;
				width: 230upx;
				line-height: 40upx;
				font-size: 30upx;
				color: #1C346D;
				background: #FFFFFF;
				border-radius: 0 30upx 30upx 0;
			}
			.zuo_boxs{
				padding: 30upx 0;
				text-align: center;
				width: 230upx;
				line-height: 40upx;
				font-size: 30upx;
				color: #333333;
				background: #F5F5F5;
				border-radius: 0 30upx 30upx 0;
			}
		}
	}
	.top_input{
			font-size: 28upx;
			color: #B9B9B9;
			margin-left: 24upx;
			height: 60upx;
			line-height: 60upx;
		}
		.top_image{
			width: 33upx;
			height: 33upx;
			margin-top: 14upx;
			margin-left: 20upx;
		}
		.top{
			width: 683upx;
			margin-left: 34upx;
			height: 60upx;
			background: #fff;
			/* background: #cf4052; */
			border-radius: 31upx;
			display: flex;
			/* padding-top: 200upx; */
		}
		.page-body {
			display: flex;
			background: #F4F4F4;
			overflow: hidden;
			margin-top: 20upx;
		}
	
		.nav {
			display: flex;
			width: 100%;
		}
	
		.nav-left {
			width: 25%;
			background: #fafafa;
		}
	
		.nav-left-item {
			margin-left: 0upx;
			height: 45upx;
			/* border-right: solid 1px #f1f1f1; */
			/* border-bottom: solid 1px #f1f1f1; */
			font-size: 30upx;
			padding: 30upx 0;
			display: flex;
			align-items: center;
			/* justify-content: center; */
		}
		.nav-left-items {
			margin-left: 0upx;
			height: 45upx;
			/* border-right: solid 1px #f1f1f1; */
			/* border-bottom: solid 1px #f1f1f1; */
			font-size: 30upx;
			padding: 30upx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-left-item:last-child{
			border-bottom: none;
		}
		.nav-right {
			width: 75%;
			background: #fff;
		}
		.box {
			display: block;
			overflow: hidden;
			border-bottom: 20upx solid #f3f3f3;
			/* min-height: 100vh; */ 
			/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
		}
		.box:last-child {
			border: none;
			min-height:100vh;
		}
		.nav-right-item {
			width: 500upx;
			height: 220upx;
			float: left;
			/* text-align: center; */
			padding: 11upx;
			display: flex;
			font-size: 28upx;
			background: #fff;
		}
	
		.nav-right-item image {
			width: 158upx;
			height: 158upx;
			margin-left: 20upx;
			border-radius: 10upx;
		}
		.actives{
			/* display: inline-block; */
			height: 10upx;
			color: #333;
			padding: 50upx 0;
			font-weight: bold;
			background: #fff;
			/* text-align: center; */
			/* border-left: 8upx solid #1C336B; */
		}
		.activesss{
			width: 6upx;
			height: 33upx;
			/* background: #1C336B; */
			color: #333;
			margin-right: 40upx;
			/* left: 0upx; */
			margin-top: 0upx;
			font-size: 28upx;
		}
		.activess{
			padding: 40upx 0;
			/* display: inline-block; */
			height: 10upx;
			background: #F4F4F4;
			color: #333;
			/* background: #fff; */
			/* border-left: 8upx solid rgba(red, green, blue, 0); */
		}
		.active {
			color: #333;
			background: #fff;
			border-right: 0;
			border-left: 8upx solid #cf4052;
		}
		::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	   width: 0;
	   height: 0;
	   color: transparent;
	}
</style>
